<template>
	<view class="content">
		<div class="swiperDiv">
			<div class="bockTop" @click="bock">
				<image src="../../static/common/img9.png" mode="" class="img9"></image>
				<span class="span1">添加健康卡</span>
				<span class="span2">（还可添加3人）</span>
				<image src="../../static/common/home2.png" mode=""class="img2"></image>
			</div>
		</div>
		<div class="bot-msg">
			<div :class="item.type=='0'?'botMsgDiv active':'botMsgDiv'" v-for="(item,index) in data" :key="index"
				@click="clickBock">
				<uni-row>
					<uni-col :span="6">
						<image src="../../static/head.png" mode="" class="img"></image>
					</uni-col>
					<uni-col :span="14">
						<div>
							<span class="span1">{{item.name}}</span>
							<span class="span2">健康卡</span>
							<span class="span3" v-if="item.type==0">默认</span>
						</div>
					</uni-col>
					<uni-col :span="4">
						<div>
							<span>{{item.type==0?'本人':'他人'}}</span>
							<image src="../../static/common/home2.png" mode="" class="img22"></image>
							
						</div>
					</uni-col>
				</uni-row>
				
			</div>
			

		</div>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				data: [
					
					{
						name: "张三三",
						type: 0
					},
					{
						name: "张三三",
						type: 1
					},
					{
						name: "张三三",
						type: 1
					},
					{
						name: "张三三",
						type: 1
					}
					
				],

			}
		},
		onShow() {

		},
		onLoad(options) {
			console.log(options,"options")
			
		},
		methods: {
			bock(){
				this.$common.navigateTo("/pages/card/add")
			},
			clickBock(){
				this.$common.navigateTo("/pages/card/check")
			}
			
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.swiperDiv {
		height: 500rpx;
		padding-top: 48rpx;
		background-color: #1648ce;
	}

	.bot-msg {
		position: absolute;
		top: 204rpx;
		width: 100%;
		height: calc(100% - 204rpx);
		background-color: #fff;
		border-top-right-radius: 70rpx;
	}
	.bockTop{
		width: 94%;
		height: 108rpx;
		line-height: 108rpx;
		margin:  auto;
		background-color: #F5FAFF;
		border-radius: 24rpx;
		position: relative;
		color:#1648CE;
	}
	.bockTop .span1{
		font-size: 32rpx;
		font-weight: 600;
		margin-left: 12rpx;
	}
	.bockTop .span2{
		font-size: 24rpx;
	}
	.img9{
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
		margin-left: 48rpx;
		margin-bottom: 4rpx;
	}
	.img2{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 34rpx;
		right: 34rpx;
	}
	.img22{
		width: 40rpx;
		height: 40rpx;
		
		vertical-align: middle;
	}
	.botMsgDiv {
		width: 94%;
		margin: 0 auto;
		margin-top: 36rpx;
		height: 180rpx;
		line-height: 180rpx;
		background: #F4F5FA;
		border: 4rpx solid #F4F5FA;
		border-radius: 24rpx;
		position: relative;
	}
	
	.botMsgDiv .img {
		width: 112rpx;
		height: 112rpx;
		padding-left: 48rpx;
		vertical-align: middle;
	}
	
	.botMsgDiv .span1 {
		color: #666666;
		font-size: 32rpx;
		font-weight: 600;
		margin-right: 24rpx;
	}
	
	.botMsgDiv .span2 {
		color: #666666;
		font-size: 24rpx;
		display: inline-block;
		width: 96rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		background: rgba(102, 102, 102, 0.1);
		border-radius: 0px 12px 0px 12px;
	}
	.botMsgDiv .span3{
		color: #fff;
		font-size: 24rpx;
		display: inline-block;
		width: 84rpx;
		height: 40rpx;
		line-height: 44rpx;
		text-align: center;
		background-color: #1648CE;
		border-radius: 0px 12px 0px 12px;
		position: absolute;
		top:-4rpx;
		right: 0;
	}
	.active{
		border-radius: 24rpx;
		border: 4rpx solid #1648CE;
	}
	
</style>